<template>
  <div id="app">
    <h1 class="fd-h1"><img src="./assets/logo.png" /><br />Artery-ui</h1>
    <nav v-if="false">
      <dl>
        <dt><span>测试</span> </dt>
        <dd><router-link to="/test1">测试1</router-link></dd>
        <dd><router-link to="/test-form">表单测试</router-link></dd>
        <dd><router-link to="/test-table">表格测试</router-link></dd>
        <dd><router-link to="/test-tree">树测试</router-link></dd>
      </dl>
    </nav>

    <nav v-if="true">
      <dl>
        <dt><span>basic</span></dt>
        <dd><router-link to="/panel">panel</router-link></dd>
        <dd><router-link to="/text">text</router-link></dd>
        <dd><router-link to="/link">link</router-link></dd>
        <dd><router-link to="/title">title</router-link></dd>
        <dd><router-link to="/image">image</router-link></dd>
        <dd><router-link to="/button">button</router-link></dd>
        <dd><router-link to="/icon">icon</router-link></dd>
        <dd><router-link to="/col">col</router-link></dd>
        <dd><router-link to="/row">row</router-link></dd>
        <dd><router-link to="/iframe">iframe</router-link></dd>
      </dl>
      <!--basic end-->
      <dl>
        <dt><span>data</span> </dt>
        <dd><router-link to="/badge">badge</router-link></dd>
        <dd><router-link to="/card">card</router-link></dd>
        <dd><router-link to="/progress">progress</router-link></dd>
        <dd><router-link to="/report">report</router-link></dd>
        <dd><router-link to="/table">table</router-link></dd>
        <dd><router-link to="/tag">tag</router-link></dd>
        <dd><router-link to="/timeline">timeline</router-link></dd>
      </dl>
      <dl>
        <dt><span>form</span> </dt>
        <dd><router-link to="/cascader">cascader</router-link></dd>
        <dd><router-link to="/checkbox">checkbox</router-link></dd>
        <dd><router-link to="/date-picker">date-picker</router-link></dd>
        <dd><router-link to="/form">form</router-link></dd>
        <dd><router-link to="/form-item">form-item</router-link></dd>
        <dd><router-link to="/input">input</router-link></dd>
        <dd><router-link to="/input-number">input-number</router-link></dd>
        <dd><router-link to="/input-money">input-money</router-link></dd>
        <dd><router-link to="/radio">radio</router-link></dd>
        <dd><router-link to="/rate">rate</router-link></dd>
        <dd><router-link to="/select">select</router-link></dd>
        <dd><router-link to="/select-tree">select-tree</router-link></dd>
        <dd><router-link to="/organ-tree">organ-tree</router-link></dd>
        <dd><router-link to="/slider">slider</router-link></dd>
        <dd><router-link to="/switch">switch</router-link></dd>
        <dd><router-link to="/textarea">textarea</router-link></dd>
        <dd><router-link to="/time-picker">time-picker</router-link></dd>
        <dd><router-link to="/transfer">transfer</router-link></dd>
        <dd><router-link to="/upload">upload</router-link></dd>
        <dd><router-link to="/hidden">hidden</router-link></dd>
        <dd><router-link to="/auto-complete">auto-complete</router-link></dd>
      </dl>

      <dl>
        <dt><span>layout</span> </dt>
        <dd><router-link to="/region-layout">region-layout</router-link></dd>
        <dd><router-link to="/button-group">button-group</router-link></dd>
        <dd><router-link to="/float-layout">float-layout</router-link></dd>
      </dl>

      <dl>
        <dt><span>navigation</span> </dt>
        <dd><router-link to="/breadcrumb">breadcrumb</router-link></dd>
        <dd><router-link to="/dropdown">dropdown</router-link></dd>
        <dd><router-link to="/menu">menu</router-link></dd>
        <dd><router-link to="/steps">steps</router-link></dd>
        <dd><router-link to="/tabs">tabs</router-link></dd>
        <dd><router-link to="/tree">tree</router-link></dd>
      </dl>

      <dl>
        <dt><span>notice</span> </dt>
        <dd><router-link to="/alert">alert</router-link></dd>
        <dd><router-link to="/message">message</router-link></dd>
        <dd><router-link to="/notice">notice</router-link></dd>
        <dd><router-link to="/poptip">poptip</router-link></dd>
        <dd><router-link to="/tooltip">tooltip</router-link></dd>
      </dl>

      <dl>
        <dt><span>other</span> </dt>
        <dd><router-link to="/scroll">scroll</router-link></dd>
        <dd><router-link to="/markdown">markdown</router-link></dd>
        <dd><router-link to="/show-more">show-more</router-link></dd>
        <dd><router-link to="/mend-photo">mend-photo</router-link></dd>
      </dl>

      <dl>
        <dt><span>pagination</span> </dt>
        <dd class="fd-col2"><router-link to="/pagination">pagination</router-link></dd>
      </dl>

      <dl>
        <dt><span>popup</span> </dt>
        <dd><router-link to="/modal">modal</router-link></dd>
      </dl>

      <dl>
        <dt><span>tools</span> </dt>
        <dd><router-link to="/affix">affix</router-link></dd>
        <dd><router-link to="/back-top">back-top</router-link></dd>
        <dd><router-link to="/color-picker">color-picker</router-link></dd>
        <dd><router-link to="/divider">divider</router-link></dd>
        <dd><router-link to="/loading-bar">loading-bar</router-link></dd>
        <dd><router-link to="/spin">spin</router-link></dd>
      </dl>

      <dl>
        <dt><span>captcha</span> </dt>
        <dd><router-link to="/captcha-slide">captcha-slide</router-link></dd>
        <dd><router-link to="/captcha-string">captcha-string</router-link></dd>
      </dl>
    </nav>


    <!--router-view-->
    <router-view class="fd-main" />
  </div>

</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      test: '<em>545454545</em>asdasd'
    }
  },
  components: {},
  mounted: function () {

  }
}
</script>
<style  lang="stylus" type="text/stylus"  >
    @import "./components/css/index.styl";
 </style>
<!--<style  lang="scss" type="text/scss"  >
    @import "./components/css/index.scss";
</style>-->
<style  lang="less" type="text/less"  >
    @import "./components/css/index.less";

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
    .fd-header {
        margin-bottom: 10px;
    }
  #app {
    position: relative;
    z-index: 1;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    overflow:auto;
     .fd-h1 {
       /*  display: none;*/
         height: 175px;
         background-color: #fff;
         box-shadow: 0 1px 5px rgba(0,0,0,0.3);
     }
    >nav {
     /*    display: none;*/
       float: left;
       width: 650px;
       min-height: 770px;
       border: 1px solid #d7dde4;
     }
     >.fd-main {
        margin-left: 670px;
      /*  margin-left: 0;*/
        min-height: 770px;
          overflow: hidden;
        border: 1px solid #d7dde4;
      }
    dl {
      position: relative;
      z-index: 1;
      padding-top: 5px;
      padding-bottom:5px;
      padding-left: 130px;
      overflow: hidden;
      border-bottom: 1px solid #d7dde4;
      >dt {
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         z-index: 1;
         width: 130px;
         font: 700 20px/30px "Microsoft YaHei";
         border-right: 1px solid #d7dde4;
        >span {
           position: absolute;
           top: 50%;
           left: 0;
           z-index: 1;
           margin-top: -15px;
           width: 100%;
         }
       }
      >dd {
         float: left;
         padding: 0 10px;
         width: 20%;
    /*     overflow: hidden;*/
         text-align: left;
         white-space: nowrap;
         overflow: visible;
         font: 14px/30px "Microsoft YaHei";
         &.fd-col2 {
              width: 30%;
          }
       }
    }
  }
</style>
